<template>
    <div class="app-container">
      <el-card class="box-card">
        <div class="flex justify-between">
          <div class="flex flex-wrap">
            
            <div>
              <span>用户ID：</span>
              <el-input
                  v-model.number="listQuery.user_id"
                  class="marginRB10"
                  clearable
                  placeholder="请输入用户ID"
                  style="width: 200px"
              ></el-input>
            </div>
            <div>
              <span>用户昵称：</span>
              <el-input
                  v-model.number="listQuery.nickname"
                  class="marginRB10"
                  clearable
                  placeholder="请输入用户昵称"
                  style="width: 200px"
              ></el-input>
            </div>
            <div>
              <span>开始时间：</span>
              <el-date-picker v-model="listQuery.start_time" class="marginRB10" placeholder="开始时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
            <div>
              <span>结束时间：</span>
              <el-date-picker v-model="listQuery.end_time" class="marginRB10" placeholder="结束时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
            <el-button
              class="marginRB10"
              icon="el-icon-search"
              type="primary"
              @click="searchSubmit"
            >搜索
            </el-button>
            <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
          </div>
        </div>
        <div v-loading="listLoading" class="item">
          <el-table ref="dataList"
                    :data="menuList"
                    border
          >
            <el-table-column label="歌曲名称" prop="name"></el-table-column>
            <el-table-column label="歌手" prop="singer"></el-table-column>
            <el-table-column label="上传用户" prop="user.nickname"></el-table-column>
            <el-table-column label="上传用户ID" prop="user.user_code"></el-table-column>
            <el-table-column label="大小" prop="size"></el-table-column>
            <el-table-column label="歌曲内容" prop="url">
              <template slot-scope="scope">
                <audio :src="scope.row.url" controls></audio>
              </template>
            </el-table-column>
            <!-- <el-table-column label="封面" prop="cover" width="200px">
              <template slot-scope="scope">
                <img :src="scope.row.cover" alt="">
              </template>
            </el-table-column> -->
            <el-table-column label="上传时间" prop="created_at"></el-table-column>
            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" plain size="mini" @click="handleStatus(scope.row)">通过</el-button>
                <el-button icon="el-icon-delete" plain size="mini" type="danger" @click="handleRejectStatus(scope.row)">拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <!-- <cus-pagination :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total"
                          @pagination="getList"
          /> -->
        </div>
      </el-card>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        @close="handleClose">
        <el-form :model="formData" ref="form" :rules="rules" label-width="120px" :inline="false" size="normal">
          <el-form-item label="驳回理由" prop="remark">
            <el-input type="textarea" rows="3" v-model="formData.remark" placeholder="请输入驳回理由" maxlength="50" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        
        <span slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </el-dialog>
      
    </div>
</template>
  
<script>
  import { songAuditList, songAudit } from '@/api/musicManagement'
  
  export default {
    data() {
      return {
        dialogVisible: false,
        row_id: 0,
        listLoading: false,
        menuList: [],
        listQuery: {
          page: 1,
          perPage: 10,
        },
        total: 0,
        // 勾选内容
        multipleSelection: [],
        // 要删除的内容的ids
        dataIds: '',
        formData: {
          id: undefined,
          status: undefined, //状态:-1拒绝,0待审核,1审核通过
          remark: undefined
        },
        rules: {
          remark: [{ required: true, message: '请输入驳回理由', trigger: 'change' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
        }
        songAuditList(this.listQuery).then(response => {
          this.menuList = response.data.data
          this.total = response.data.total
          this.listLoading = false
        })
      },
      searchSubmit() {
        this.listQuery.page = 1
        this.getList()
      },
      // 点击重置
      resetSubmit() {
        this.listQuery = {
          page: 1,
          perPage: 10,
        }
        this.getList()
      },
      handleStatus(row, type) {
        this.$confirm('是否确认通过审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          songAudit({
                id: row.id,
                status: 1
            }).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                }
                this.dialogVisible = false
                this.getList()
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });
        });
      },
      handleRejectStatus(row) {
        this.formData.id = row.id
        this.formData.status = -1
        this.dialogVisible = true
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            songAudit(this.formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.dialogVisible = false
                this.$notify({
                  type: 'success',
                  message: '操作成功',
                  showClose: false,
                  duration: 3000
                })
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
  
<style scoped>
  [v-cloak] {
    display : none;
  }
  
  .clearfix:before,
  .clearfix:after {
    display : table;
    content : "";
  }
  
  .clearfix:after {
    clear : both;
  }
  
  .box-card {
    width : 100%;
  }
  
  .demo-form-inline {
    float : right;
  }

  
  ::v-deep .el-upload-list__item {
    transition : none !important;
  }
  
  ::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color : #409eff;
  }
  
  .avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
  }
  
  .avatar {
    width   : 100px;
    height  : 100px;
    display : block;
  }
</style>
  